<template>
	<view class="personal">
		<TopBar :indexflag="true" :combakflag="true" :lang="false" :bottom="true" :title="$t('JoinAlliance')"
			barstyle="background-color:rgba(0,0,0,0)"></TopBar>
		<HeaderTitle :title="$t('DeliveryArea')" :bottom="false" :lang="false" :mobile="true" :combakflag="true">
		</HeaderTitle>
		<view :class="i18nLocale=='ug'?'input-from ug-from':'input-from'">
			<!-- <view class="input-item">
				<view class="title">
					{{$t('ScopeDelivery')}}
				</view>
				<view class="tops">
					
					<view class="top-item" v-for="item in selecetAre">
						{{i18nLocale=='ug'?item.ug_name:item.cn_name}}
					</view>
				</view>
			</view> -->
			<view class="line"></view>
			<view class="input-item" @click="changeArea">
				<view class="title">
					{{$t('UserArea')}}
				</view>
				<u--input :placeholder="$t('UserAreaPlasholder')" border="bottom" fontSize="28rpx"
					:adjustPosition='false' :value="areaname"></u--input>
				<u-picker v-if="columns.length" :show="show" ref="uPicker" :columns="columns" @close="show=false"
					@cancel="show=false" @change="changeHandler" @confirm="changepiker" closeOnClickOverlay
					:cancelText="$t('TimeCancel')" :confirmText="$t('Confirm')"
					:keyName="i18nLocale=='ug'?'ug_name':'cn_name'"></u-picker>
			</view>
			<view class="input-item">
				<view class="">{{$t('OtherAreas')}}</view>
				<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
					<u-checkbox :customStyle="{marginBottom: '12px'}" activeColor="#45bc1b"
						v-for="(item, index) in tops" :key="index" :label="i18nLocale=='ug'?item.ug_name:item.cn_name"
						:name="item.id">
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<u-toast ref="uToast" :message="notmessage"></u-toast>
	</view>
</template>

<script>
	import TopBar from "@/components/TopBar.vue"
	import HeaderTitle from "@/components/HeaderTitle.vue"
	import {
		postriders,
		getareas,
		gettops,
		getridertops,
		postridertops
	} from '@/api/all.js';

	export default {
		components: {
			TopBar,
			HeaderTitle
		},
		data() {
			return {
				fileList6: [],
				show: false,
				columns: [],
				areaname: '',
				tops: [],
				topsname: '',
				area_code: '',
				selecetAre: [],
				checkboxValue1: [],
				notmessage: '请仔细填写!'
			};
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: this.$t('DeliveryPerson')
			})
			this.getAreas();
			this.getRidertops();
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
		},
		methods: {
			getAreas() {
				let that = this;
				getareas({}).then((res) => {
					if (res.code == 200) {
						let data = res.body.data;
						that.columns.push(data);
					}

				})
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					console.log(this.columns[0][index].children, '+++++')
					picker.setColumnValues(1, this.columns[0][index].children);
				}
			},
			checkboxChange(e) {
				let that = this;
				postridertops({
					top_id: e
				}).then((res) => {
					if (res.code == 200) {
						that.$refs.uToast.show({
							top: 0,
							message: this.$t('AddSusius'),
							color: '#fff',
							bgColor: '#f0ba53'
						});
						that.getRidertops()
					}
				})
			},
			getTops(area_code) {
				let that = this;
				gettops({
					area_code: area_code
				}).then((res) => {
					console.log(res, '++++')
					if (res.code == 200) {
						let data = res.body.data;
						
						that.tops = data;
					}

				})
			},
			getRidertops() {
				let that = this;
				getridertops({}).then((res) => {
					if (res.code == 200) {
						that.selecetAre = res.body.data;
						that.$store.commit('setTops', that.selecetAre);
						that.area_code = res.body.data[0].area_code;
						that.selecetAre.map(item => {
							that.checkboxValue1.push(item.id);
						})

						that.getTops(that.area_code);

					}
				})
			},
			changeArea() {
				this.show = true;
			},
			changepiker(e) {
				this.show = false;
				this.area_code = e.value[1].code;
				this.getTops(this.area_code);
				if (this.$i18n.locale == 'ug') {
					this.areaname = e.value[0].ug_name + ' / ' + e.value[1].ug_name
				} else {
					this.areaname = e.value[0].cn_name + ' / ' + e.value[1].cn_name
				}

				console.log(e, '++++')
			}

		}
	}
</script>

<style lang="scss">
	.personal {
		padding: $uni-spacing-padding-sm;
		box-sizing: border-box;

		.input-from {
			// background-color: #fff;
			width: 100%;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			// border-radius: $uni-border-radius-lg;
			// box-shadow: $uni-bg-shadow;

			.input-item {
				width: 100%;
				// display: flex;
				padding: $uni-spacing-padding-sm;
				box-sizing: border-box;


				input {
					font-size: $uni-font-size-base;

				}

				.u-checkbox-group {
					padding: 30rpx 0rpx;
				}

				.title {
					color: $uni-color-title;
					font-size: $uni-font-size-base;
				}

				.item {
					display: flex;
					margin-top: 10rpx;

					text {
						padding: 0rpx 10rpx;
					}
				}
			}
		}

		.line {
			width: 100%;
			border-top: 1rpx dashed #999;
			margin: 30rpx 0rpx;
		}

		.selecet-addres {
			background-color: #fff;
			width: 100%;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			margin-top: $uni-spacing-margin-sm;
			border-radius: $uni-border-radius-lg;
			box-shadow: $uni-bg-shadow;
			color: $uni-color-title;
			font-size: $uni-font-size-base;



		}

		.no-address {
			margin-top: 100rpx;

			text {
				padding: 0rpx 20rpx;
			}
		}

		.address {
			// border-bottom: 2rpx solid;
			display: flex;
			margin-bottom: 20rpx;
			background-color: $uni-bg-color-box;
			width: 100%;
			padding: 30rpx 40rpx;
			box-sizing: border-box;
			margin-top: $uni-spacing-margin-sm;
			border-radius: $uni-border-radius-lg;
			box-shadow: $uni-bg-shadow;

			.left {
				width: 70%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				font-size: $uni-font-size-sm1;

				.user {
					display: flex;

					.name {
						color: #15c45b;
						font-weight: bold;
					}

					.pone {
						padding: 0rpx 40rpx;
						box-sizing: border-box;
					}

				}

				.address-title {
					margin-top: 10rpx
				}
			}

			.right {
				width: 30%;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.raio {
					width: 50rpx;
					height: 50rpx;
					border-radius: 100%;
					border: 4rpx solid $uni-border-color;
					display: flex;
					justify-content: center;
					align-items: center;

				}

				.acradio {
					border: 4rpx solid $uni-color-topic;
					background-color: $uni-color-topic;
				}
			}

		}

		.tops {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.top-item {
				padding: 5rpx 20rpx;
				background-color: $uni-color-parbg;
				border-radius: 20rpx;
			}
		}
	}

	.ug-from {
		direction: rtl;

		/deep/ .uni-input-input {
			direction: rtl !important;
			text-align: right;
		}

		/deep/ .uni-input-placeholder {
			text-align: right;
		}
	}
</style>